<template>
    <div class="custmermanagement">
        <div v-show="isshow">
            <div class="titel"><h1>负责的所有客户</h1></div>
            <div class="msg">
                <el-button type="success" @click="add">+ 新增</el-button>
                <el-table
                    :data="usersData"
                    stripe
                    style="width: 100%"
                    :lazy="true"
                >
                    <el-table-column prop="_id" label="客户编号" width="250">
                    </el-table-column>
                    <el-table-column prop="account" label="账号">
                    </el-table-column>
                    <el-table-column prop="usersPassword" label="密码">
                    </el-table-column>
                    <el-table-column prop="usersName" label="姓名">
                    </el-table-column>
                    <el-table-column prop="usersPhone" label="联系方式">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                type="primary"
                                icon="el-icon-edit"
                                @click="modification(scope.row)"
                            ></el-button>
                            <el-button
                                type="primary"
                                icon="el-icon-delete"
                                @click="del(scope.row._id)"
                            ></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div v-show="isshow1">
            <div class="titel"><h1>新增客户人员</h1></div>
            <div class="add">
                <el-form label-width="80px">
                    <el-form-item label="账号:">
                        <el-input v-model="users.account"></el-input>
                    </el-form-item>
                    <el-form-item label="密码:">
                        <el-input
                            v-model="users.usersPassword"
                            show-password
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="姓名:">
                        <el-input v-model="users.usersName"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式:">
                        <el-input v-model="users.usersPhone"></el-input>
                    </el-form-item>
                    <el-button type="success" @click="sub">上一步</el-button>
                    <el-button type="success" @click="register(users)"
                        >注册</el-button
                    >
                </el-form>
            </div>
        </div>
        <div v-show="isshow2">
            <div class="titel"><h1>修改客户人员</h1></div>
            <div class="add">
                <el-form label-width="80px">
                    <el-form-item label="账号:">
                        <el-input v-model="users.account"></el-input>
                    </el-form-item>
                    <el-form-item label="密码:">
                        <el-input
                            v-model="users.usersPassword"
                            show-password
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="姓名:">
                        <el-input v-model="users.usersName"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式:">
                        <el-input v-model="users.usersPhone"></el-input>
                    </el-form-item>
                    <el-button type="success" @click="laststep"
                        >上一步</el-button
                    >
                    <el-button type="success" @click="amend(users)"
                        >修改</el-button
                    >
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
let { mapActions, mapState } = createNamespacedHelpers("users");
export default {
    data() {
        return {
            isshow: true,
            isshow1: false,
            isshow2: false,
            users: {
                account: "",
                usersPassword: "",
                usersName: "",
                usersPhone: "",
                _id: "",
                salespersonsId: JSON.parse(localStorage.user)._id,
            },
        };
    },
    computed: {
        ...mapState(["usersData"]),
    },
    mounted() {
        this.getUsers(this.users.salespersonsId);
    },
    methods: {
        open2() {
            this.$message({
                message: "新增成功",
                type: "success",
                duration: 1000,
                center: true,
            });
        },
        open1() {
            this.$message({
                showClose: true,
                message: "删除成功",
                type: "success",
                center: true,
            });
        },
        open5() {
            this.$message({
                showClose: true,
                message: "修改成功",
                type: "success",
                center: true,
            });
        },
        open4() {
            this.$message.error("新增失败");
        },
        open3() {
            this.$message.error("删除失败");
        },
        open6() {
            this.$message.error("修改失败");
        },
        ...mapActions(["addUsers", "getUsers", "updateUsers", "deleteUsers"]),
        add() {
            this.isshow = !this.isshow;
            this.isshow1 = !this.isshow1;
        },
        sub() {
            this.isshow = !this.isshow;
            this.isshow1 = !this.isshow1;
        },
        //新增客户
        async register(users) {
            let data = await this.addUsers(users);
            if (data.code) {
                this.open2();
                this.isshow = !this.isshow;
                this.isshow1 = !this.isshow1;
                this.getUsers(this.users.salespersonsId);
            } else {
                this.open4();
            }
        },
        //修改客户信息
        modification(val) {
            this.users = val;
            this.isshow = !this.isshow;
            this.isshow2 = !this.isshow2;
        },
        async amend(users) {
            let data = await this.updateUsers(users);
            if (data.code) {
                this.open5();
                this.getUsers();
                this.isshow2 = !this.isshow2;
                this.isshow = !this.isshow;
            } else {
                this.open6();
            }
        },
        //上一步
        laststep() {
            this.isshow2 = !this.isshow2;
            this.isshow = !this.isshow;
        },
        //删除客户信息
        async del(val) {
            let data = await this.deleteUsers(val);
            if (data.code) {
                this.open1();
                this.getUsers();
            } else {
                this.open3();
            }
        },
    },
};
</script>

<style lang="scss">
.custmermanagement {
    .titel {
        line-height: 40px;
        background: rgba(185, 169, 169, 0.911);
        h1 {
            margin-left: 20px;
            color: rgb(255, 255, 255);
        }
    }
    .msg {
        background: white;
        // height: 500px;
        margin-top: 30px;
        padding: 20px 20px 20px 20px;
    }
    .add {
        background: white;
        margin-top: 30px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-form {
            width: 350px;
            text-align: center;
        }
    }
}
</style>